import {Card, Icon, Pagination} from 'antd';
import './ContentList.css'
import React from 'react';
import {Link} from 'react-router-dom';
import {inject, observer} from "mobx-react";


const IconText = ({type, text}) => (
    <span style={{marginRight: 20}}>
    <Icon type={type} style={{marginRight: 4}} theme="twoTone"/>
        {text}
  </span>
);


const cardStyle = {
    width: '94%',
    marginRight: '30px',
    marginLeft: '3%',
    marginBottom: '20px'
};


@inject('blogStore')
@observer
export default class ContentList extends React.Component {


    constructor(props) {
        super(props);
        // FIXME 返回的时候自动切换到首页的BUG
        this.props.blogStore.update(undefined,this.props.blogStore.number,10);
    }
    pageChange = (page, pageSize) => {
        console.log(`正在切换到${page}  ${pageSize}`)
        this.props.blogStore.update(undefined,page, undefined);
    }

    render() {
        var list=[];
        this.props.blogStore.blogList.forEach((data) => {
            list.push(<Card style={{cardStyle}}>
                    <Link to={'/blog/' + data.id}>
                        <span className="blog-title">
                            {data.title}
                        </span>
                        </Link>
                    <p className="publishDate">发布时间：{data.createTime}</p>
                    {data.description.substring(0,200)}
                    <div style={{marginTop: 20}}>
                        <IconText type="star-o" text={data.vblogLookCount}/>
                        <IconText type="like-o" text="0"/>
                        <IconText type="message" text="0"/>
                    </div>
                </Card>
            )
        });
        return (
            <div style={cardStyle}>
                {list}
                <Pagination className="pageInfo" showQuickJumper defaultCurrent={this.props.blogStore.number} defaultPageSize={this.props.blogStore.size}
                            total={this.props.blogStore.total}
                            onChange={this.pageChange}/>
            </div>
        );
    }


}


